<!DOCTYPE html>
<html>
<!--
  组件并不是真实的 DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
  上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
  -->
<meta charset="UTF-8"/> 
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      debugger;
      var MyComponent = React.createClass({
        handleClick: function() {
        debugger;
        console.log(this.refs.myTextInput); // 真实的DOM
        // Jerry 2016-02-24 18:47PM 这行代码被调用的时候，真实的DOM肯定生成了
        this.refs.myTextInput.focus();
      },
      render: function() {
        return (
          <div>
          <input type="text" ref="myTextInput" />
          <input type="button" value="Focus the text input" onClick={this.handleClick} />
          </div>
        );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);
    </script>
  </body>
</html>
